<template>
  <div class="tsline-channel">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="news-list"
    >
      <van-card
        v-for="item in list"
        :key="item.id"
        :price="item.price"
        :desc="item.description"
        :title="item.name"
        :origin-price="item.market_price>0?item.market_price:null"
        @click="onClick(item)"
      >
        <template slot="thumb">
          <van-image
            :src="item.thumb"
            fit="cover"
          >
            <template v-slot:loading>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
            <template v-slot:error>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
          </van-image>
        </template>
      </van-card>
    </van-list>
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Loading,
  Button,
  Card,
  Image,
  PullRefresh,
  Lazyload,
  List
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Card.name]: Card,
    [Loading.name]: Loading,
    [Image.name]: Image,
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    [Lazyload.name]: Lazyload,
    [List.name]: List
  },

  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      count: 0,
      show: false,
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      },
      formats: [
        'tsline-text',
        'tsline-thumb',
        'tsline-banner',
        'tsline-gralley'
      ]
    }
  },

  methods: {
    onLoad () {
      let page = this.meta.currentPage + 1
      let categoryId = this.$route.params.id
      console.log(categoryId)
      this.axios
        .get('/shop/category/' + categoryId, {
          params: { page: page },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onClick (item) {
      this.$router.push({
        name: 'goods/:id',
        params: {
          id: item.id
        }
      })
    },
    arrayUnique (arr) {
      let result = []
      let hash = {}
      for (let i = 0, elem; (elem = arr[i]) != null; i++) {
        if (!hash[elem.id]) {
          result.push(elem)
          hash[elem.id] = true
        }
      }
      return result
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.van-card {
  padding: 16px;
  &:not(:first-child) {
    margin-top: 1px; /*no*/
  }
}
.van-card__thumb {
  .van-image {
    width: 100%;
    height: 100%;
  }
}
.news-content {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 1;
  height: 0;
  padding-bottom: 100%;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.news-content img {
  width: 100%;
  margin: auto;
}
.news-content div {
  width: 100%;
  height: 100%;
}
.news-content span {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
}
.news-list {
  padding-top: 0;
}
.news-list /deep/ .van-cell-text {
  line-height: 0.44rem;
  font-size: 0.32rem;
  color: #666666;
}

.news-list .flexbox {
  font-size: 0;
}

.tsline-thumb /deep/ {
  padding: 0 0 2px;
}
.tsline-thumb /deep/ .van-cell__title {
  -webkit-box-flex: 1.38;
  -ms-flex: 1.38;
  flex: 1.38;
  order: 1;
  align-self: center;
}
.tsline-thumb /deep/ .van-cell__title div {
  padding: 0 10px;
}
.van-card__title {
  font-size: 15px;
  color: #121212;
  font-weight: 500;
  line-height: 20px;
  max-height: 40px;
}

.van-card__desc {
  margin-top: 6px;
}

.van-card__price {
  color: #f60;
  &-currency {
    margin-right: 2px;
    transform: scale(0.5);
  }
}

.news-exts {
  width: 100%;
  text-align: left;
  padding: 0.15rem 0 0;
  max-height: 0.75rem;
  overflow: hidden;
  font-weight: 300;
}
.news-exts span {
  font-size: 0.21rem;
  display: inline-block;
}
.news-exts span:not(.van-tag) {
  color: #aaa;
}
.news-exts span.van-tag {
  padding: 0.02rem 0.04rem;
}
.news-exts span.hsbar {
  width: 0.1rem;
  text-align: center;
}

.news-exts /deep/ .van-button--mini {
  width: 0.3rem;
  position: absolute;
  right: 0.1rem;
  border-radius: 0.2rem;
}

.tsline-thumb .news-exts {
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>
